<div
  class="clr-row clr-align-items-center clr-justify-content-between"
  *ngIf="showTitle() || buttonGroup"
>
  <h4 class="clr-col-10" *ngIf="showTitle()">{{ title }}</h4>
  <clr-dg-action-bar class="clr-col-2" *ngIf="buttonGroup">
    <app-button-group [view]="buttonGroup"></app-button-group>
  </clr-dg-action-bar>
</div>
<clr-datagrid [clrDgLoading]="false">
  <clr-dg-placeholder>
    <ng-container *ngIf="placeholder?.length > 0; else emptyPlaceholder">
      {{ placeholder }}
    </ng-container>
    <ng-template #emptyPlaceholder>
      <!--      All content has been filtered out.-->
    </ng-template>
  </clr-dg-placeholder>
  <clr-dg-column
    *ngFor="let columnName of columns; trackBy: identifyColumn"
    [clrDgSortBy]="columnName === 'Age' ? timeStampComparator : null"
    [(clrDgSortOrder)]="sortOrder"
  >
    {{ columnName }}
    <clr-dg-filter *ngIf="filters[columnName]">
      <app-content-filter
        [column]="columnName"
        [filter]="filters[columnName]"
      ></app-content-filter>
    </clr-dg-filter>
    <clr-dg-filter *ngIf="!filters[columnName]">
      <app-content-text-filter [column]="columnName"></app-content-text-filter>
    </clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row
    *clrDgItems="let row of rowsWithMetadata; trackBy: identifyRow"
    [ngClass]="row | filterDeletedDatagridRow"
  >
    <clr-dg-action-overflow *ngIf="row.actions.length > 0 && !row.isDeleted">
      <ng-container *ngFor="let action of row.actions; trackBy: identifyAction">
        <button class="action-item" (click)="runAction(action)">
          {{ action.name }}
        </button>
      </ng-container>
    </clr-dg-action-overflow>
    <clr-dg-cell *ngFor="let column of columns; trackBy: identifyColumn">
      <app-view-container [view]="row.data[column]"></app-view-container>
    </clr-dg-cell>
    <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="row?.expandedDetails">
      <clr-dg-row-detail *clrIfExpanded [clrDgReplace]="row?.replace">
        <ng-template [ngIf]="row.expandedDetails.length > 1" [ngIfElse]="displayOverall">
          <clr-dg-cell *ngFor="let detail of row.expandedDetails">
            <app-view-container [view]="detail"></app-view-container>
          </clr-dg-cell>
        </ng-template>
        <ng-template #displayOverall>
          <app-view-container [view]="row.expandedDetails[0]"></app-view-container>
        </ng-template>
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
  <clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="defaultPageSize">
      <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">
        Items per page
      </clr-dg-page-size>
      <ng-container *ngIf="rowsWithMetadata?.length > 0">
        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
        {{ pagination.totalItems }} items
      </ng-container>
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

<cds-modal [closable]="true" [hidden]="!isModalOpen" (closeChange)="toggleModal()">
  <cds-modal-header>
    <h3 cds-text="title" cds-first-focus>{{ actionDialogOptions?.confirmation?.title }}</h3>
  </cds-modal-header>
  <cds-modal-content>
    <div
      ngPreserveWhitespaces
      [innerHTML]="actionDialogOptions?.confirmation?.body"
    ></div>
  </cds-modal-content>
  <cds-modal-actions>
    <cds-button action="outline" (click)="toggleModal()">Cancel</cds-button>
    <cds-button action="outline" [status]="actionDialogOptions?.type" (click)="acceptModal()">{{ actionDialogOptions?.text }}</cds-button>
  </cds-modal-actions>
</cds-modal>
